import {
  Button,
  Modal,
  Input,
  Form,
  Row,
  Col,
  Radio,
  Space,
  Popconfirm,
  TimePicker,
  InputNumber,
} from "antd";
import dayjs from "dayjs";
import { useState, forwardRef, useImperativeHandle } from "react";

export default forwardRef((props, ref) => {
  const [form] = Form.useForm();
  const [type, setType] = useState("1");
  const [cancle, setCancle] = useState("1");
  const [wait, setWait] = useState("0");
  const [sign, setSign] = useState("1");
  const [appointDeadline, setAppointDeadline] = useState(0);
  const [between, setBetween] = useState([]);
  const [time, setTime] = useState(null);
  const [minute, setMinute] = useState(null);
  const [stop1, setStop1] = useState(null);
  const [stop2, setStop2] = useState(null);
  const [signMinute, setSignMinute] = useState(null);
  const [timeCancel1, setTimeCancel1] = useState(null);
  const [timeCancel2, setTimeCancel2] = useState(null);
  const [timeCancel3, setTimeCancel3] = useState(null);

  const [days, setDays] = useState(null);
  const [day2, setDay2] = useState(null);

  const submit = async () => {
    let params = await form.validateFields();
    if (params.appointWay === "3") {
      if (params.appointTimeLimit.type && params.appointTimeLimit.type === 1) {
        delete params.appointTimeLimit.day2;
        delete params.appointTimeLimit.minute;
        delete params.appointTimeLimit.time;
      } else if (
        params.appointTimeLimit.type &&
        params.appointTimeLimit.type === 2
      ) {
        params.appointTimeLimit.days = params.appointTimeLimit.day2;
        delete params.appointTimeLimit.day2;
        delete params.appointTimeLimit.between;
        delete params.appointTimeLimit.minute;
      } else if (
        params.appointTimeLimit.type &&
        params.appointTimeLimit.type === 3
      ) {
        delete params.appointTimeLimit.days;
        delete params.appointTimeLimit.day2;
        delete params.appointTimeLimit.between;
        delete params.appointTimeLimit.time;
      } else {
        params.appointTimeLimit = {};
      }
      params.appointTimeLimit = JSON.stringify(params.appointTimeLimit);
    }
    if (params.selfSigninFlag === "0") {
      if (
        params.signinTimeLimit.type &&
        (params.signinTimeLimit.type === 1 || params.signinTimeLimit.type === 2)
      ) {
        delete params.signinTimeLimit.time;
      } else if (!params.signinTimeLimit.type) {
        params.signinTimeLimit = {};
      }
      params.signinTimeLimit = JSON.stringify(params.signinTimeLimit);
    }
    if (params.selfAppointCancelFlag === "0") {
      if (
        params.selfAppointCancelLimit.type &&
        params.selfAppointCancelLimit.type === 1
      ) {
        params.selfAppointCancelLimit.time =
          params.selfAppointCancelLimit.time1;
        delete params.selfAppointCancelLimit.time1;
        delete params.selfAppointCancelLimit.time2;
        delete params.selfAppointCancelLimit.time3;
      } else if (
        params.selfAppointCancelLimit.type &&
        params.selfAppointCancelLimit.type === 2
      ) {
        params.selfAppointCancelLimit.time =
          params.selfAppointCancelLimit.time2;
        delete params.selfAppointCancelLimit.time1;
        delete params.selfAppointCancelLimit.time2;
        delete params.selfAppointCancelLimit.time3;
      } else if (
        params.selfAppointCancelLimit.type &&
        params.selfAppointCancelLimit.type === 3
      ) {
        params.selfAppointCancelLimit.time =
          params.selfAppointCancelLimit.time3;
        delete params.selfAppointCancelLimit.time1;
        delete params.selfAppointCancelLimit.time2;
        delete params.selfAppointCancelLimit.time3;
      } else {
        params.selfAppointCancelLimit = {};
      }
      params.selfAppointCancelLimit = JSON.stringify(
        params.selfAppointCancelLimit
      );
    }
    if (params.queueBackupLimit) {
      params.queueBackupLimit = JSON.stringify(params.queueBackupLimit);
    }
    props.submit({
      ...params,
      courseType: "3",
    });
  };

  const handleData = (data) => {
    console.log(data);
    let params = { ...data };
    if (data.appointWay) {
      setType(data.appointWay);
      if (data.appointWay === "2") {
        setAppointDeadline(data.appointDeadline);
      }
      if (data.appointWay === "3") {
        setAppointDeadline(data.appointDeadline);
        if (data.appointTimeLimit) {
          data.appointTimeLimit = JSON.parse(data.appointTimeLimit);
          if (data.appointTimeLimit.type === 1) {
            if (data.appointTimeLimit.between) {
              data.appointTimeLimit.between = data.appointTimeLimit.between
                .split("-")
                .map((t) => dayjs(t, "HH:mm"));
            }
            setDays(data.appointTimeLimit.days);
            setBetween(data.appointTimeLimit.between);
          } else if (data.appointTimeLimit.type === 2) {
            let day = data.appointTimeLimit.days;
            data.appointTimeLimit.time = dayjs(
              data.appointTimeLimit.time,
              "HH:mm"
            );
            setDay2(day);
            setTime(data.appointTimeLimit.time);
          } else {
            setMinute(data.appointTimeLimit.minute);
          }
        }
      }
    }
    setWait(data.queueBackupFlag || "0");
    if (data.queueBackupFlag === "1") {
      if (data.queueBackupLimit) {
        data.queueBackupLimit = JSON.parse(data.queueBackupLimit);
        setStop1(data.queueBackupLimit.stop1);
        setStop2(data.queueBackupLimit.stop2);
      }
    }
    setSign(data.selfSigninFlag || "1");
    if (data.selfSigninFlag === "0" && data.signinTimeLimit) {
      data.signinTimeLimit = JSON.parse(data.signinTimeLimit);
      if (data.signinTimeLimit.type === 3) {
        setSignMinute(data.signinTimeLimit.time);
      }
    }
    setCancle(data.selfAppointCancelFlag || "1");
    if (data.selfAppointCancelFlag === "0" && data.selfAppointCancelLimit) {
      data.selfAppointCancelLimit = JSON.parse(data.selfAppointCancelLimit);
      if (data.selfAppointCancelLimit.type === 1) {
        setTimeCancel1(data.selfAppointCancelLimit.time);
      } else if (data.selfAppointCancelLimit.type === 2) {
        setTimeCancel2(data.selfAppointCancelLimit.time);
      } else {
        setTimeCancel3(data.selfAppointCancelLimit.time);
      }
    }

    form.setFieldsValue(data);
  };
  useImperativeHandle(ref, () => ({
    handleData,
  }));
  return (
    <Form
      form={form}
      labelCol={{ span: 3 }}
      wrapperCol={{ span: 19 }}
      initialValues={{
        type: 1,
        wait: 1,
        cancle: 1,
        sign: 1,
      }}
    >
      <Form.Item name="id" hidden></Form.Item>
      <Form.Item name="courseId" hidden></Form.Item>
      <Row gutter={8}>
        <Col span={24}>
          <h3>预约时间设置</h3>
        </Col>
        <Col span={24}>
          <Form.Item label="预约方式" name="appointWay">
            <Radio.Group
              onChange={(e) => {
                form.setFieldValue("appointDeadline", 0);
                setType(e.target.value);
              }}
            >
              <Radio value={"1"}>不支持会员自主预约</Radio>
              <Radio value={"2"}>自主预约，不限制预约时间</Radio>
              <Radio value={"3"}>自主预约，限制预约时间</Radio>
            </Radio.Group>
          </Form.Item>
        </Col>
        {type === "2" && (
          <Col span={24}>
            <Form.Item label="预约截止时间" name="appointDeadline">
              课程预约人数未满，会员需早于开课前{" "}
              <InputNumber
                value={appointDeadline}
                min={0}
                onChange={(value) => {
                  setAppointDeadline(value);
                  form.setFieldValue("appointDeadline", value);
                }}
                placeholder="请输入"
              ></InputNumber>{" "}
              分钟自主预约
            </Form.Item>
          </Col>
        )}

        {type === "3" && (
          <>
            <Col span={24}>
              <Form.Item
                label="预约时间"
                // name='appointTimeLimit.type'
              >
                <Form.Item name={["appointTimeLimit", "type"]}>
                  <Radio.Group>
                    <Space direction="vertical">
                      <Radio value={1}>
                        <Space>
                          <Form.Item name={["appointTimeLimit", "days"]}>
                            提前{" "}
                            <InputNumber
                              value={days}
                              onChange={(value) => {
                                setDays(value);
                                form.setFieldValue(
                                  ["appointTimeLimit", "days"],
                                  value
                                );
                              }}
                              min={0}
                              placeholder="不限制"
                            />{" "}
                            天,
                          </Form.Item>
                          <Form.Item name={["appointTimeLimit", "between"]}>
                            <TimePicker.RangePicker
                              format={"HH:mm"}
                              value={between}
                              onChange={(value) => {
                                setBetween(value);
                                let [starTime, endTime] = value;
                                form.setFieldValue(
                                  ["appointTimeLimit", "between"],
                                  `${dayjs(starTime).format("HH:mm")}-${dayjs(
                                    endTime
                                  ).format("HH:mm")}`
                                );
                              }}
                            />{" "}
                            接受自主预约
                          </Form.Item>
                        </Space>
                      </Radio>
                      <Radio value={2}>
                        <Space>
                          <Form.Item name={["appointTimeLimit", "day2"]}>
                            提前{" "}
                            <InputNumber
                              value={day2}
                              onChange={(value) => {
                                setDay2(value);
                                form.setFieldValue(
                                  ["appointTimeLimit", "day2"],
                                  value
                                );
                              }}
                              min={0}
                              placeholder="不限制"
                            />{" "}
                            天,
                          </Form.Item>
                          <Form.Item name={["appointTimeLimit", "time"]}>
                            <TimePicker
                              format={"HH:mm"}
                              value={time}
                              onChange={(value) => {
                                setTime(value);
                                form.setFieldValue(
                                  ["appointTimeLimit", "time"],
                                  dayjs(value).format("HH:mm")
                                );
                              }}
                            />{" "}
                            后接受自主预约
                          </Form.Item>
                        </Space>
                      </Radio>
                      <Radio value={3}>
                        <Space>
                          <Form.Item name={["appointTimeLimit", "minute"]}>
                            提前{" "}
                            <InputNumber
                              value={minute}
                              onChange={(value) => {
                                setMinute(value);
                                form.setFieldValue(
                                  ["appointTimeLimit", "minute"],
                                  value
                                );
                              }}
                              min={0}
                              placeholder="不限制"
                            />{" "}
                            分钟接受自主预约
                          </Form.Item>
                        </Space>
                      </Radio>
                    </Space>
                  </Radio.Group>
                </Form.Item>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="预约截止时间" name="appointDeadline">
                课程预约人数未满，会员需早于开课前{" "}
                <InputNumber
                  value={appointDeadline}
                  min={0}
                  onChange={(value) => {
                    setAppointDeadline(value);
                    form.setFieldValue("appointDeadline", value);
                  }}
                  placeholder="请输入"
                ></InputNumber>{" "}
                分钟自主预约
              </Form.Item>
            </Col>
          </>
        )}

        <Col span={24}>
          <h3>排队候补设置</h3>
        </Col>
        <Col span={24}>
          <Form.Item label="排队候补" name="queueBackupFlag">
            <Radio.Group onChange={(e) => setWait(e.target.value)}>
              <Radio value={"1"}>开启</Radio>
              <Radio value={"0"}>关闭</Radio>
            </Radio.Group>
          </Form.Item>
        </Col>

        {wait !== "0" && (
          <>
            <Col span={24}>
              <Form.Item label="候补设置">
                <Col span={21}>
                  <Form.Item
                    label="最大排队人数"
                    name={["queueBackupLimit", "number"]}
                  >
                    <InputNumber min={0} placeholder="请输入"></InputNumber>
                  </Form.Item>
                </Col>
                <Col span={21}>
                  <Form.Item
                    label="开课前"
                    name={["queueBackupLimit", "stop1"]}
                  >
                    <InputNumber
                      value={stop1}
                      min={0}
                      onChange={(value) => {
                        setStop1(value);
                        form.setFieldValue(
                          ["queueBackupLimit", "stop1"],
                          value
                        );
                      }}
                      placeholder="请输入"
                    ></InputNumber>{" "}
                    分钟停止排队
                  </Form.Item>
                </Col>
                <Col span={21}>
                  <Form.Item
                    label="开课前"
                    name={["queueBackupLimit", "stop2"]}
                  >
                    <InputNumber
                      value={stop2}
                      min={0}
                      onChange={(value) => {
                        setStop2(value);
                        form.setFieldValue(
                          ["queueBackupLimit", "stop2"],
                          value
                        );
                      }}
                      placeholder="请输入"
                    ></InputNumber>{" "}
                    分钟停止候补
                  </Form.Item>
                </Col>
              </Form.Item>
            </Col>
          </>
        )}
        <Col span={24}>
          <h3>签到设置</h3>
        </Col>
        <Col span={24}>
          <Form.Item label="自主签到" name="selfSigninFlag">
            <Radio.Group onChange={(e) => setSign(e.target.value)}>
              <Radio value={"0"}>开启</Radio>
              <Radio value={"1"}>关闭</Radio>
            </Radio.Group>
          </Form.Item>
        </Col>
        {sign !== "1" && (
          <Col span={24}>
            <Form.Item
              label="签到时间"
              // name='todo'
            >
              <Form.Item name={["signinTimeLimit", "type"]}>
                <Radio.Group>
                  <Space direction="vertical">
                    <Radio value={1}>课程当天，会员可随时签到</Radio>
                    <Radio value={2}>课程当天，会员可在课程结束前签到</Radio>
                    <Radio value={3}>
                      <Form.Item name={["signinTimeLimit", "time"]}>
                        课程当天，会员可在课程结束后{" "}
                        <InputNumber
                          value={signMinute}
                          min={0}
                          onChange={(value) => {
                            setSignMinute(value);
                            form.setFieldValue(
                              ["signinTimeLimit", "time"],
                              value
                            );
                          }}
                          placeholder="请输入"
                        ></InputNumber>{" "}
                        分钟内签到
                      </Form.Item>
                    </Radio>
                  </Space>
                </Radio.Group>
              </Form.Item>
            </Form.Item>
          </Col>
        )}
        <Col span={24}>
          <h3>预约取消设置</h3>
        </Col>
        <Col span={24}>
          <Form.Item label="自主取消" name="selfAppointCancelFlag">
            <Radio.Group onChange={(e) => setCancle(e.target.value)}>
              <Radio value={"0"}>开启</Radio>
              <Radio value={"1"}>关闭</Radio>
            </Radio.Group>
          </Form.Item>
        </Col>
        {cancle === "0" && (
          <Col span={24}>
            <Form.Item label="取消时间">
              <Form.Item name={["selfAppointCancelLimit", "type"]}>
                <Radio.Group>
                  <Space direction="vertical">
                    <Radio value={1}>
                      <Form.Item name={["selfAppointCancelLimit", "time1"]}>
                        会员自主取消不晚于开课前{" "}
                        <InputNumber
                          value={timeCancel1}
                          min={0}
                          onChange={(value) => {
                            setTimeCancel1(value);
                            form.setFieldValue(
                              ["selfAppointCancelLimit", "time1"],
                              value
                            );
                          }}
                          placeholder="请输入"
                        ></InputNumber>{" "}
                        分钟
                      </Form.Item>
                    </Radio>
                    <Radio value={2}>
                      <Form.Item name={["selfAppointCancelLimit", "time2"]}>
                        会员自主取消不晚于开课后{" "}
                        <InputNumber
                          value={timeCancel2}
                          min={0}
                          onChange={(value) => {
                            setTimeCancel2(value);
                            form.setFieldValue(
                              ["selfAppointCancelLimit", "time2"],
                              value
                            );
                          }}
                          placeholder="请输入"
                        ></InputNumber>{" "}
                        分钟
                      </Form.Item>
                    </Radio>
                    <Radio value={3}>
                      <Form.Item name={["selfAppointCancelLimit", "time3"]}>
                        会员自主取消不晚于课程结束后{" "}
                        <InputNumber
                          value={timeCancel3}
                          min={0}
                          onChange={(value) => {
                            setTimeCancel3(value);
                            form.setFieldValue(
                              ["selfAppointCancelLimit", "time3"],
                              value
                            );
                          }}
                          placeholder="请输入"
                        ></InputNumber>{" "}
                        分钟
                      </Form.Item>
                    </Radio>
                  </Space>
                </Radio.Group>
              </Form.Item>
            </Form.Item>
          </Col>
        )}
        <Col span={24}>
          <Form.Item>
            <Button type="primary" onClick={submit}>
              确认保存
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
});
